<style type="text/css">
.block_image {
    position: relative;
    max-width: var(--general_layout_width);
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.block_image-fill {
    width: 100% !important;
    max-width: 100%;
}
.block_image a{
    width: 100%;
}
.image-size-big img {
    height: 800px;
    width: 100%;
    object-fit: cover;
}


.image-size-middle img {
    height: 560px;
    width: 100%;
    object-fit: cover;
}

.image-size-small img{
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.image-size-middle  .content-describe{
    margin-top:20px !important;
}

  .image-size-middle  .content-btn{
    margin-top:30px !important;
}

.image-size-small  .content-describe{
    margin-top:10px !important;
}

.image-size-small  .content-btn{
    margin-top:20px !important;
}
.image-size-auto img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.block_image .block_image-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}


.block_image-fill .block_image-content{
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}

.block_image .block_image-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 0 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 110;
    box-sizing: border-box;
}

.block_image .content-position-center{
    align-items: center;
    text-align: center;
}
.block_image .content-position-center .content-describe{
    max-width: 800px;
}

.block_image .content-position-left{
    align-items: flex-start;
    text-align: left;
}

.block_image .content-position-left .content-describe{
  max-width: 380px;
}

.block_image .content-position-right{
    align-items: flex-end;
    text-align: right;
}
.block_image .content-align-right .content-describe{
  max-width: 380px;
}



.block_image .content-title {
  margin:0;
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
  font-size:var(--title_font_size);
  line-height: 1;
}

.block_image .content-describe {
margin-top: 10px;
color: #fff;
}

.block_image .block_image_content{
    max-width: 380px;
    padding: 30px;
    background: #fff;
}



.block_image .content-align-right{
display: flex;
flex-direction: column;
align-items: flex-end;
text-align:right;
}

.block_image .content-align-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
}

.block_image .content-align-left{
display: flex;
flex-direction: column;
align-items: flex-start;
text-align:left;
}

.block_image .block-image-mobile{
    display: none;
}

@media screen  and (max-width: 1200px) {
    .block_image .block_image-content{
        padding: 0 50px;
    }
}


@media screen and (max-width: 768px) {
    .block_image .slide-item .slide-item-des{
        font-size: 14px;
    }

    .block_image.image-size-big  img{
        height: 600px;
    }
    .block_image.image-size-middle img{
        height: 400px;
    }
    .block_image.image-size-samll img{
        height: 320px;
    }
    .block_image .block_image-content{
        padding:0 30px;
    }
}
@media screen and (max-width: 767px) {
    .block_slides .block-image-mobile{
        display: block;
    }
    .block_slides .block-image-pc{
        display: none;
    }
    .block_image.image-size-big  img{
        height: 100vh;
    }
    .block_image.image-size-middle img{
        height: 70vh;
    }
    .block_image.image-size-samll img{
        height: 50vh;
    }
    .block_image .block-image-mobile{
        display: block;
    }
    .block_image .block-image-pc{
        display: none;
    }
    .block_image .content-position-left .content-describe{
        margin-top:0;
    }
    .block_image .content-position-left .content-btn{
        margin-top:10px;
    }
    .block_image .block_image-content{
        padding:0 15px;
    }
}
</style>
<div class="block_image {% if section.settings.is_full %}block_image-fill{% endif %} image-size-{{ section.settings.height }}">
    <a href="{% if section.settings.slide_path.url %}{{ section.settings.slide_path.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}">
        {% if section.settings.web_image.src != "" %}
        <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %}  data-src="{{ section.settings.web_image.src|public_front_asset_url }}" src="{{ 'banner_loading.png' | public_asset_abs_dir_url }}" alt="{{ section.settings.web_image.alt }}" class="block-image-pc">
        {% else %}
        <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %} src="{{ 'banner@2x.png' | public_asset_abs_dir_url }}"  class="block-image-pc">
        {% endif %}

        {% if section.settings.web_image.src != "" or section.settings.mobile_image.src != "" %}
        <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %} data-src="{{ section.settings.mobile_image.src | default:section.settings.web_image.src |public_front_asset_url}}" src="{{ 'banner_loading.png' | public_asset_abs_dir_url }}" alt="{{ section.settings.mobile_image.alt }}" class="block-image-mobile">
        {% else %}
        <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %} src="{{ 'banner@2x.png' | public_asset_abs_dir_url }}"  class="block-image-mobile">
        {% endif %}


        <div class="block_image-mask" style="background-color:{{ section.settings.mask_color }};opacity: {{ section.settings.mask_transparent | divided_by : 100  }};"></div>

        <div class="slide-content-{{ block_id | default : section.block_id }} block_image-content content-size-{{ section.settings.text_size }}  content-position-{{ section.settings.text_position }}">
            {% if section.settings.title != '' or section.settings.content != '' or section.settings.button_text != '' %}
            <div class="block_image_content content-align-{{ section.settings.text_position }}">
                <h2 class="content-title" style="color:{{ section.settings.title_color }}">{{ section.settings.title }}</h2>
                <div class="content-describe" style="color:{{ section.settings.content_color }}">{{ section.settings.content|html_content_filter }}</div>
                {% if section.settings.button_text %}
                <span class="content-btn main_btn" style="background-color:{{ section.settings.button_background_color }};color:{{ section.settings.button_font_color  }}" >{{ section.settings.button_text }}</span>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </a>

</div>

{% schema %}
{
	"tag": "section",
	"class": "block_image",
	"is_global": false,
	"name": {
		"zh_CN": "单图",
		"en_US": "Single image"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc图片",
				"en_US": "PC image"
			},
			"info": {
				"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
				"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
			},
			"id": "web_image"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端图片",
				"en_US": "Mobile image"
			},
			"info": {
				"zh_CN": "尺寸建议1242*2000px",
				"en_US": "Size suggested 1242*2000px"
			},
			"id": "mobile_image"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"id": "slide_path"
		},
		{
			"type": "card_select",
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "middle"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "small"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			}
		},
		{
			"type": "card_switch",
			"id": "is_full",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			}
		},
		{
			"type": "card_slider",
			"id": "mask_transparent",
			"max": "100",
			"min": 0,
			"label": {
				"zh_CN": "蒙层不透明度",
				"en_US": "Mask opacity"
			}
		},
		{
			"type": "card_color",
			"id": "mask_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			}
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			}
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "content"
		},
		{
			"type": "card_select",
			"id": "text_position",
			"label": {
				"zh_CN": "标题按钮位置",
				"en_US": "Title button location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			]
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "标题颜色",
				"en_US": "Header color"
			}
		},
		{
			"type": "card_color",
			"id": "content_color",
			"label": {
				"zh_CN": "内容颜色",
				"en_US": "Content color"
			}
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "按钮",
				"en_US": "Button"
			}
		},
		{
			"type": "card_input",
			"id": "button_text",
			"label": {
				"zh_CN": "按钮标题",
				"en_US": "Button title"
			}
		},
		{
			"type": "card_color",
			"id": "button_background_color",
			"label": {
				"zh_CN": "按钮背景",
				"en_US": "Button background"
			}
		},
		{
			"type": "card_color",
			"id": "button_font_color",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			}
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"web_image": {
				"src": "",
				"alt": ""
			},
			"mobile_image": {
				"src": "",
				"alt": ""
			},
			"slide_path": {
				"type": "",
				"title": "",
				"url": ""
			},
			"height": "auto",
			"is_full": true,
			"mask_transparent": "0",
			"mask_color": "#000",
			"title": "New Prints",
			"content": "Shop our exclusive Dress Range",
			"text_position": "left",
			"title_color": "#000",
			"content_color": "#000",
			"button_text": "SHOW NOW",
			"button_background_color": "#8B5A47",
			"button_font_color": "#fff"
		},
		"blocks": []
	}
}
{% endschema %}